<template>
  <n-tree 
    :data="treeData" 
    :node-props="nodeProps"
    :render-label="renderLabel"
    :render-prefix="renderPrefix"
    block-line
    cascade
    class="slash-tree"
    default-expand-all
    expand-on-dragenter
    key-field="id"
    label-field="securityObjName"
    selectable="true"
    style="max-height: 600px; min-height: 600px;overflow-y: scroll"
  />
</template>

<script lang="ts">
import {defineComponent, h, onMounted, ref} from "vue";
import {NTooltip, TreeOption} from "naive-ui";
import { SlashAppContext } from "slash-admin"
import httpApi from "../../httpApi"


export default defineComponent(
  {
    components: {},
    emits: ["select"],
    setup(props, ctx) {
      const renderLabel = (info: { option: Record<string, any> & TreeOption, checked?: boolean, selected?: boolean }) => {
        const {option} = info
        return h(NTooltip,{},{
          default: option.securityObjName,
          trigger: h('div', {
            class: 'ellipsis-text'
          }, option.securityObjName)
        })
      }
      const renderPrefix = (info: { option: Record<string, any> & TreeOption, checked?: boolean, selected?: boolean }) => {
        const {option} = info;
        return h("i", {
          class: `${option.iconDefault} `,
          style: {
            color: `${option.enabled || (option.children) ? "" : "#0f93ff"}`,
            marginRight: "0px"
          }
        });
      };
      const nodeProps = ({option}: { option: TreeOption }) => {
        return {
          onClick() {
            if(option.nodeType=='obj')
            {
              ctx.emit("select", option);

            }
          }

        };
      };
      const onDrop = async (data: { node: TreeOption, dragNode: TreeOption, dropPosition: "before" | "inside" | "after", event: DragEvent }) => {
        console.log("拖动", data);
        const {node, dragNode, dropPosition} = data;
        const updateData = {
          id: dragNode.id,
          position: dropPosition,
          targetId: node.id

        };
        await reload();
      };
      onMounted(() => {
        init();
      });
      const reload = async () => {
        await init();
      };
      const treeData = ref<any>([]);
      const init = async () => {
        const appCode = SlashAppContext.getRequest().appCode || "";
        const msg = await httpApi.selectSecurityObjTreeList({
        } as any);
        treeData.value = [
          {
            id: 0,
            securityObjName: "全部权限对象资源",
            resourceAppCode: appCode,
            children: [...msg.data]
          }
        ];
        console.log(treeData.value);
      };
      return {
        renderLabel,
        renderPrefix,
        onDrop,
        treeData,
        nodeProps,
        defaultExpandedKeys: ref(["40", "41"])
      };
    }
  }
);


</script>

<style lang="less" scoped>

.slash-tree {

  ::v-deep(.n-tree-node) {
    .n-tree-node-content__suffix {
      visibility: hidden;
    }

    &:hover {
      .n-tree-node-content__suffix {
        visibility: visible;
      }
    }
  }

}
:deep(.n-tree-node-content) {
  .n-tree-node-content__text {
    width: calc(100% - 90px);
  }
  .ellipsis-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }
}
</style>
